<template>
    <FrameWork></FrameWork>
    <div class="card">
        <div class="card-body">
            <h2 style="text-align:center;">系统用户账号管理</h2>
            <h2><router-link class="btn btn-sm btn-success" :to="{name: 'addAccount'}">添加用户账号</router-link></h2>
            <table class="table  table-primary  table-striped table-hover">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">ID</th>
                <th scope="col">用户名</th>
                <th scope="col">手机号</th>
                <th scope="col">邮箱</th>
                <th scope="col">角色身份</th>
                <th scope="col"></th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for="account in accounts" :key="account.id">
                    <th scope="row">{{ account.id }}</th>
                    <td>{{ account.username }}</td>
                    <td>{{ account.phone }}</td>
                    <td v-if="account.email != null">{{ account.email }}</td>
                    <td v-else>NULL</td>
                    <td v-if="account.roleId == '0'">管理员</td>
                    <td v-if="account.roleId == '1'">教师</td>
                    <td v-if="account.roleId == '2'">学生</td>
                    <td>
                        <router-link class="btn btn-sm btn-primary" style="margin-right:5px;" :to="{name:'updateInfo', params: {id:account.id}}">编辑</router-link>
                        <a v-if="account.roleId == '0'" class="btn btn-sm btn-secondary disabled">删除</a>
                        <a v-else class="btn btn-sm btn-danger"  @click="deleteInfo(account.id)">删除</a>
                    </td>
              </tr>

            </tbody>
            </table>

            <span aria-label="Page navigation example">

                <ul class="pagination" style="float:left">
                    <li class="page-item disabled">
                        <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                    </li>
                </ul>

                <ul class="pagination" style="float:right">
                    <li class='page-item'>
                        <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                        <a v-else class="page-link" @click="getPage( prePage,pageSize )">上一页</a>
                    </li>

                    <li class="page-item" v-for="(item, index) in totalPage" :key="index"><a  class="page-link" @click="getPage(item,pageSize)">{{ item }}</a></li>
                    <!-- <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                    <li class= 'page-item'>
                        <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                        <a  v-else class="page-link" @click="getPage( nextPage,pageSize )">下一页</a>  
                    </li>

                </ul>
            </span>
        </div>
    </div>
</template>



<script>

import FrameWork from '@/components/admin/FrameWork.vue';
import $ from 'jquery';
import {ref} from 'vue';
//  import router from '@/router/index';
 import { useStore } from 'vuex';

export default{
    name: 'AccountManageView',
    components:{
        FrameWork,
    },
    setup(){
        const store = useStore();
        let accounts = ref([]);
        let PageNum ;  //当前页数
        let PageSize ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页

        PageNum = 1;
        PageSize = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        $.ajax({
            url: 'http://localhost:8090/sls/account/pageInfo/'+ PageNum + '/' + PageSize,
            type: "get",
            headers: {
                // Authorization: "Bearer " +localStorage.getItem('jwt_token'),
                Authorization: "Bearer " +store.state.user.token,
            },
        success(resp){
            //console.log(resp);
            accounts.value = resp.list;
            totalNum.value = resp.total;
            totalPage.value = resp.pages;
            pageNum.value = resp.pageNum;
            pageSize.value = resp.pageSize;
            isFirstPage.value = resp.isFirstPage;
            isLastPage.value = resp.isLastPage;
            nextPage.value = resp.nextPage;
            prePage.value = resp.prePage

        },
        error(resp){
            console.log(resp);
        }
        });

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (PageNum, PageSize)=>{   //按页查询用户信息
            // console.log('pageNum:');
            // console.log(pageNum);
            // console.log('pageSize:');
            // console.log(pageSize);
            $.ajax({
            url: 'http://localhost:8090/sls/account/pageInfo/'+ PageNum + '/' + PageSize,
            type: "get",
            headers: {
                // Authorization: "Bearer " +localStorage.getItem('jwt_token'),
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);
                // console.log('resp.list:');
                // console.log(resp.list);
                accounts.value = resp.list;
                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage
                updatePageInfo(pageNum,pageSize);

                 //console.log('PageNum: ');
                 //console.log(PageNum);
            },
            error(resp){
                console.log(resp);
            }
            });
        }

        const deleteInfo = (id) => {  //删除用户账号信息
            //console.log("id: ");
            //console.log(id);
            $.ajax({
                url: "http://localhost:8090/sls/account/deleteById",
                type: "post",
                data: {
                    id: id,
                },
                headers: {
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    //console.log(resp.error_message);
                  }else{
                    alert(resp.error_message);
                    //console.log(resp.error_message);
                  }
                },
                error(resp){
                    console.log(resp);
                 }
           });
           getPage(PageNum, PageSize);
        }

        return{
            getPage,
            deleteInfo,
            updatePageInfo,
            accounts,
            PageNum,
            PageSize,
            pageNum,
            pageSize,
            totalNum,
            totalPage,
            isFirstPage,
            isLastPage,
            nextPage,
            prePage,

        }

    }

}

</script>



<style scoped>
.card{
margin: 5px;
    }
</style>